<template>
    <div>
    <Header></Header>
    <div class="wrap">
      <!-- 精选好课 -->
      <div class="conten_list">
        <div class="public_title">
          <h2>精选好课</h2>
          <span>Select good courses</span>
        </div>
        <ul class="courses_list">
          <li v-for="(item,index) in courses" :key="index">
            <img :src="item.litpic" alt="" />
            <dl>
              <dt>{{item.title}}</dt>
              <dd><a href="#/playVideo">立即观看</a></dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
    </div>
</template>
<script>
import Header from "@/components/layout/header.vue";
export default {
    components:{Header},
    data() {
        return {
            courses:[],
            type:""
        }
    },
    mounted(){
       this.type = this.$route.query.type
       this.getCourse()
    },
    methods:{
         getCourse(){
            this.$axios.post('/api/index/index').then(res=>{
              if(this.type==1){
                this.courses = res.data.data.jp_kc
              } else if(this.type==2){
                this.courses=res.data.data.xs_kc
              }
         })
        },
        
    }
}
</script>
<style scoped>
.courses_list {
  display: flex;
  margin-bottom: 30px;
  
}
 .public_title {
  display: flex;
  align-items: baseline;
  position: relative;
  margin: 20px 0;
}
.public_title h2 {
  font-size: 30px;
  margin-right: 10px;
  font-weight: normal;
}
.public_title h2::before{
  content: '';
  width: 6px;
  height: 32px;
  display: inline-block;
  background: #4398F8;
  margin-right: 15px;
  vertical-align: middle;
}
.public_title span {
  text-transform: uppercase;
  font-size: 20px;
}

.courses_list li img{
  height: 210px;
}
.courses_list li {
  width: 280px;
  margin-right: 20px;
}
.courses_list li:last-child {
  margin-right: 0;
}
.courses_list li dl {
  text-align: left;
  box-shadow: 0px 3px 18px 0px rgba(59, 59, 59, 0.22);
  padding: 10px;
  box-sizing: border-box;
}
.courses_list li dl dt {
  font-size: 18px;
}
</style>